<template>
  <div>
    <div class="table_wrap">
      <el-table :data="listdata" border>
          <el-table-column prop="Cname" label="课程名称"></el-table-column>
          <el-table-column prop="Cnumber" label="课程代码"></el-table-column>
          <el-table-column  prop="Onlineuser" label="在学人数"></el-table-column>
          <el-table-column label="所属分类">
            <template #default="scope">
              <div>
                  {{scope.row.CategoryOne+"/"+scope.row.CategoryTwo+"/"+scope.row.CategoryThree}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="编辑日期">
            <template #default="scope">
              <div>
                {{new Date(scope.row.createAt).toLocaleString()}} 
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template #default="scope">
              <div>
                {{scope.row.isState==1?'草稿':scope.row.isState==2?'已上架':'已下架'}} 
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="400">
              <template #default="scope">
                <div>
                  <el-button type="primary" @click="turnAdd(scope.row._id,scope.row.ID)">编辑</el-button>
                  <el-button type="danger" @click="del(scope.row._id)">删除</el-button>
                  <el-button type="success" @click="updown(scope.row.ID)">
                   {{ scope.row.isState==1?'上架':scope.row.isState==2?'下架':'上架'}}</el-button>
                  <el-button type="primary" @click="top(scope.row.ID)">{{scope.row.isTop?'取消置顶':'置顶'}}</el-button>
                </div>
              </template>
          </el-table-column>
      </el-table>
        <el-pagination @current-change="pageChange"  background layout="prev,pager,next"   :page-size="3"  :total="count">
       </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  props:["listdata","count"]
}
</script>
<script lang="ts" setup>
    import {ref} from 'vue'
    import {upAndDown,delCourse,topCourse} from '../../api/course'
import { ElMessage } from 'element-plus';
import {useRouter} from 'vue-router'
let router=useRouter();
      let emit=defineEmits(["sendpage"])
      let page=ref(1);
      // 子传父  分页页码
      let pageChange=(val:number)=>{
          page.value=val;
          emit("sendpage",val)
      }
      let turnAdd=(_id:any,ID:any)=>{
        router.push({
          name:"addcourse",
          query:{
            c_id:_id,
            CDid:ID,
            status:"edit"
          }
        })
      }
      // 上架下架
       async  function updown(ID:any){
          let res=await upAndDown(ID)
          console.log(res);
          emit("sendpage",page.value)
       }
      //  删除
       let del=async (_id:any)=>{
          let res:any=await delCourse(_id)
            ElMessage.success("删除成功")
            emit("sendpage",page.value)
         }
      // 置顶
      let top=async (ID:any)=>{
            let res=await topCourse(ID)
            emit("sendpage",page.value)
      }
       
</script>

<style lang="less">
  .table_wrap{
    margin-top: 20px;
  }
</style>